@use 'design-system' as *;

.codeViewer {
    --files-min-width: 10em;
    --mobile-header-height: #{$spacing-size-8};

    height: 100%;
    container-type: inline-size;
    border-radius: var(--radius-md);
    overflow: hidden;

    &.codeViewerBorder {
        border: 1px solid var(--color-border-primary);
    }
}

.inner {
    display: flex;
    min-width: 100%;
    height: 100%;
    transition:
        transform 0.33s ease-in-out,
        min-width 0.33s ease-in-out;

    @container (width < 640px) {
        height: calc(100% - var(--mobile-header-height));

        .hideFiles & {
            transform: translateX(calc(var(--files-min-width) * -1));
            min-width: calc(100% + var(--files-min-width));
        }
    }
}

.mobileHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 $spacing-size-4;
    height: var(--mobile-header-height);
    padding: 0 $spacing-size-4;
    border-bottom: 1px solid var(--color-border-secondary);
    overflow-x: auto;
    overflow-y: hidden;

    @container (width > 640px) {
        display: none;
    }

    button:not([class^='ag-']),
    span {
        flex-shrink: 0;
    }

    svg {
        --icon-size: 1.125em;

        position: relative;
        margin-left: $spacing-size-1;
        bottom: 0.125em;
    }
}

.hidden {
    display: none;
}

.files {
    position: relative;
    flex-shrink: 0;
    min-width: var(--files-min-width);
    overflow-y: auto;
    overflow-x: hidden;
    padding: $spacing-size-2 0 $spacing-size-2 $spacing-size-2;
    color: var(--color-fg-secondary);
    box-shadow: inset -1px 0 0 0 var(--example-border-color);

    @container (width < 640px) {
        width: var(--files-min-width);
    }

    ul {
        margin: 0;
    }

    h4 {
        margin-top: 0;
        margin-bottom: 0;
        padding-left: $spacing-size-1 + 2px;
        font-size: var(--text-fs-sm);
        font-weight: var(--text-regular);

        &:not(:first-child) {
            margin-top: $spacing-size-10;
        }
    }
}

.file {
    --file-border-color: transparent;

    width: 100%;
    padding: 0 $spacing-size-4 2px $spacing-size-1;
    margin-bottom: 2px;
    font-size: var(--text-fs-sm);
    font-weight: var(--text-bold);
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-fg-primary);
    border-top: 1px solid var(--file-border-color);
    border-left: 1px solid var(--file-border-color);
    border-bottom: 1px solid var(--file-border-color);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: var(--radius-sm);
    border-top-left-radius: var(--radius-sm);
    transition:
        color $transition-default-timing,
        background-color $transition-default-timing,
        border-color $transition-default-timing;

    &:hover {
        --file-border-color: var(--color-border-primary);

        color: var(--color-fg-primary);
        background-color: var(--color-bg-primary);
        border-top: 1px solid var(--file-border-color);
        border-left: 1px solid var(--file-border-color);
        border-bottom: 1px solid var(--file-border-color);
    }

    &:focus-visible {
        border-color: var(--color-util-brand-500);

        #{$selector-darkmode} & {
            background-color: var(--color-bg-primary);
        }
    }

    &.isActive {
        --file-border-color: var(--color-border-primary);

        background-color: color-mix(in srgb, var(--color-bg-secondary), var(--color-bg-primary) 70%);

        #{$selector-darkmode} & {
            background-color: color-mix(in srgb, var(--color-bg-secondary), var(--color-bg-primary) 70%);
        }
    }
}

.code {
    flex-grow: 1;
    overflow: hidden;

    > div {
        height: 100%;
    }

    pre:global(.code) {
        height: 100%;
        margin-top: 0;
        margin-bottom: 0;
        border-radius: 0;
        border: none;
    }
}
